<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul{
				width: 800px;
				height: 600px;
				border: 10px solid red;
				/*设为弹性容器*/
				display: flex;
				margin: 0px auto;
				
				/*
				 * flex-wrap：
				 * 设置弹性元素是否在弹性容器中自动换行
				 * 可选值：
				 *   nowrap 默认值：元素不会自动换行
				 *   wrap  元素沿着辅轴方向自动换行
				 *   wrap-reverse 元素沿着辅轴反方向换行
				 * */
				
			 /*flex-wrap:wrap-reverse;*/
			 
			 /*flex-flow：wrap和direction的简写属性*/
			flex-flow:row wrap;
			
			
			/*
			 justify-content：主轴
			   -如何分配主轴上的空白空间（主轴上的元素如何排列）
			   -可选值：
			      flex-start  元素沿着主轴起边排列
			      flex-end 元素沿着主轴终边排列
			      center  元素居中排列
			      space-around 空白分布到元素两侧
			      space-between 空白均匀分布到元素间
			      space-evenly 空白分布到元素的单侧  兼容性不好，慎用
			      */
			     
			     /*justify-content:center;*/
			    
			    
			    /*
			     * align-items: 辅轴
			     *   -元素在辅轴上如何对齐
			     *   -元素间的关系
			     *       -可选值
			     *    stretch 默认值，将元素的长度设置为相同的值
			     *    flex-start 元素不会拉伸，沿着辅轴起边对齐
			     *    flex-end  沿着辅轴的终边对齐
			     *    center  居中对齐
			     *    baseline  基线对齐
			     * 
			     */
			    align-items:  center;
			}
			
			li{
				width: 200px;
				/*height: 100px;*/
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				background-color: #bfa;
				
				flex-shrink: 0;
			}
			
			li:nth-child(1){
			
			}
			li:nth-child(2){
				background-color:pink;
			}
			
			li:nth-child(3){
				background-color:skyblue;
			
			}
			li:nth-child(4){
				background-color:chocolate;
			
			}
			li:nth-child(5){
				background-color:purple;
			
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>
				2
				<div>2</div>
			</li>
			<li>
				3
				<div>3</div>
				<div>3</div>
			</li>
			<li>1</li>
			<li>
				2
				<div>2</div>
			</li>
		</ul>
	</body>
</html>
